<template>
	<view class="content">
		<up-swiper :list="swiperImages" @change="e => current = e.current" :autoplay="true" height="200" radius="0"
			indicatorActiveColor="#000" indicatorInactiveColor="#717171">
			<template #indicator>
				<view class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperImages" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</template>
		</up-swiper>
		<view class="tagbox">
			<up-tabs :list="[{name: '进行中'}, {name: '已结束'}]" @click="onChangeTag" :scrollable="false" lineColor="#FF872E"
				:inactiveStyle="{ color: '#606266' }" :activeStyle="{ color: '#000' }"></up-tabs>
			<view class="separatebox"></view>
		</view>
		<view class="cardbox" v-for="(item, index) in dataList" :key="index">
			<view class="top">
				<view class="imagebox">
					<image :src="ASSETS_URL +item.activityImg" alt="" mode="aspectFill" />
				</view>
				<view class="textbox">
					<text class="ellipsis_wrapper">{{item.activityName}}</text>
					<!-- <text>培训时间：{{ item.trainDate}}</text> -->
					<text>已报名{{item.enrollment}}人</text>
				</view>
			</view>
			<view class="bottom">
				<view class="titlebox">
					<text class="item_title">线上学习</text>
					<view class="studyTimeWrapper">
						<!-- <text>总时长: {{ (item.videosLength / 60).toFixed(2) }}min</text> -->
						<text>总时长: {{ mustWatchTime }}min</text>
						<text>已获学时: {{ (item.userProcess / 60).toFixed(2) }}min</text>
					</view>
					<view class="progress">
						<view style="width: 70%;">
							<up-line-progress activeColor="#dc2006"
								:percentage="Math.floor(item.userProcess / (mustWatchTime * 60) * 100) > 100 ? 100 : Math.floor(item.userProcess / (mustWatchTime * 60)* 100)"
								height="10"></up-line-progress>
						</view>
						<text>进度：{{ Math.floor(item.userProcess / (mustWatchTime * 60) * 100) > 100 ? 100 : Math.floor(item.userProcess / (mustWatchTime * 60)* 100) }}%</text>
					</view>
				</view>
				<view class="bth" :class="{'notStudy' : !item.isFinish === 0}">
					<up-button v-if="item.isFinish === 0" text="去学习" type="primary" color="#dc2006"
						@click="gotoStudy(item)"></up-button>
					<up-button v-if="item.isFinish === 1" text="已完成" @click="gotoStudy(item)" type="primary"
						color="#e8e8e8"></up-button>
					<up-button v-if="item.isFinish === 2" text="未完成" type="primary" color="#e8e8e8"></up-button>
					<up-button v-if="item.isFinish === 3" text="已结束" type="primary" color="#e8e8e8"></up-button>
				</view>
			</view>
			
			<!-- <view class="bottom">
				<view class="titlebox">
					<text>线下培训</text>
					<text>培训时间: {{ item.training}}</text>
				</view>
				<view class="bth">
					<up-button v-if="item.isTrain" type="primary" text="去报名" color="#FF872E"></up-button>
				</view>
			</view> -->
		</view>
		<view class="footer">
			<text>暂时没有更多了</text>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		targetUrl
	} from "../../uitls/request.js"
	import {
		getList
	} from '../../api/activity.js';
	import {
		ASSETS_URL
	} from '../../uitls/global.js';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		getBanner
	} from '../../api/banner.js';
	import {
		autoLogin
	} from '../../api/user';
	import {
		getActivityWatchLength
	} from '../../api/activity.js'
	import { getIntroduce } from '../../api/introduce.js';
		const current = ref(0)
		let type = ref(0)
		const swiperImages = ref([])
		let dataList = ref([])
		let loginFlag = false;
		// let flag = ref(false);
		let mustWatchTime = ref('');

		function onChangeTag(e) {
			type.value = e.index
			getData();
		}

		function gotoStudy(item) {
			// if(!flag.value){
			// 	uni.showToast({
			// 		title:"该功能暂未开放",
			// 		icon:"none"
			// 	})
			// 	return;
			// }
			uni.navigateTo({
				url: '/pages/index/study?item=' + JSON.stringify(item.activityId),
			});
		}
		async function getData() {
			const {
				data
			} = await getList({
				type: type.value
			})
			dataList.value = data;
		}
		async function getBannerList() {
			const {
				data
			} = await getBanner();
			swiperImages.value = data.map((item) => {
				return ASSETS_URL + item.imageUrl;
			})
		}

		function onShareTimeline() {
			return {
				title: '红十字救护员培训学习平台', // 分享标题
				path: '/pages/index/index',
				imageUrl: '../../static/basicprofile.jpg' // 分享时显示的图片路径
			};
		}

		// 分享给好友
		function onShareAppMessage() {
			return {
				title: '这是分享给好友的标题',
				path: '/pages/index/index',
				imageUrl: '../../static/basicprofile.jpg'
			}
		}
		onShow(async () => {
			// const {data} = await getIntroduce();
			// if(data){
			// 	if(data[0].title){
			// 		flag.value = true;
			// 	}
			// }
			//如果本地数据被清除
			if (!loginFlag) {
				//获取轮播图
				getBannerList();
				//自动登录
				const {
					code: code
				} = await wx.login();
				if (code) {
					//查询是否是 老用户/已经登陆过
					const {
						data
					} = await autoLogin(code)
					if (data) {
						uni.setStorageSync("openId", data.openId);
						uni.setStorageSync("userId", data.userId);
						loginFlag = true;
					} else {
						uni.showToast({
							title: '登录过期，请重新登录',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/login',
						});
					}
				} else {
					return;
				}
				//获取当前视频必看时长
				const {
					data: time
				} = await getActivityWatchLength();
				mustWatchTime.value = time.minuteNumber;
			}
			//如果登录信息正常则可以请求
			if (uni.getStorageSync("openId")) {
				getData();
			} else {
				uni.showToast({
					title: '登录过期，请重新登录',
					icon: 'none'
				})
				uni.navigateTo({
					url: '/pages/login',
				});
			}
		})
	</script>
<style>
	page {
		background-color: #f0f0f0;
	}
</style>
<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
				width: 24px !important;
			}
		}
	}

	.tagbox {
		padding: 5px 0 0 0;
		margin: 10px 0;
		background-color: white;
		position: relative;

		.separatebox {
			position: absolute;
			top: 10px;
			left: 50%;
			width: 1px;
			height: 30px;
			background-color: #c4c4c4;
		}
	}
	.ellipsis_wrapper {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cardbox {
		margin: 10px 10px 0 10px;
		padding: 10px 10px 20px 10px;
		border-radius: 10px;
		background-color: white;

		.top {
			display: flex;
			border-bottom: #cacaca solid 1px;
			padding-bottom: 15px;
			gap: 10px;

			.imagebox {
				width: 100px;
				height: 100px;
				border-radius: 10px;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10px;
				}

			}

			.textbox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text:nth-child(1) {
					font-weight: bold;
					font-size: 16px;
				}

				text:nth-child(2) {
					color: gray;
					font-size: 14px;
				}

				text:nth-child(3) {
					color: #a6a6a6;
					font-size: 12px;
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 8px 0;

			.titlebox {
				display: flex;
				width: 70%;
				box-sizing: border-box;
				flex-direction: column;
				gap: 5px;

				.item_title {
					font-weight: bold;
					font-size: 16px;
				}

				// text:nth-child(2) {
				// 	color: #FF872E;
				// 	font-size: 14px;
				// }
			}

			.bth {
				width: 80px;
				height: 30px;

				button {
					height: 100% !important;
				}
			}

			.notStudy button {
				color: gray !important;
			}
		}
	}

	.studyTimeWrapper {
		width: 100%;
		display: flex;
		gap: 40rpx;
		font-size: 0.8rem;
		color: gray;
	}

	.progress {
		width: 100%;
		height: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 0.7rem;
			color: #ea6550;
		}
	}

	.footer {
		text-align: center;
		padding: 20px;
		color: #a6a6a6;
	}
</style>